<template>

  <view class="company-vip-container">
    <view class="bg">
      <view class="title">认证企业账号，尊享企业特权</view>
      <view class="content">
        <view class="item">
          <view class="box">
            <image src="https://www.huangjinya.top/xcx/company/xiangyouhui.png">
          </view>
          <view>享优惠</view>
        </view>
        <view class="item">
          <view class="box">
            <image src="https://www.huangjinya.top/xcx/company/baodijia.png"
                   mode="widthFix">
          </view>
          <view>保底价</view>
        </view>
        <view class="item">
          <view class="box">
            <image src="https://www.huangjinya.top/xcx/company/zhuankefu.png"
                   mode="widthFix">
          </view>
          <view>专客服</view>
        </view>
        <view class="item">
          <view class="box">
            <image src="https://www.huangjinya.top/xcx/company/youpeisong.png"
                   mode="widthFix">
          </view>
          <view>优配送</view>
        </view>
        <view class="item">
          <view class="box">

            <image src="https://www.huangjinya.top/xcx/company/keyuyue.png"
                   mode="widthFix">
          </view>
          <view>可预约</view>
        </view>
        <view class="item">
          <view class="box">
            <image src="https://www.huangjinya.top/xcx/company/houjiesuan.png"
                   mode="widthFix">
          </view>
          <view>后支付</view>
        </view>
      </view>
    </view>
    <view class="btn1"
          @click="goBack">
      我再想想
    </view>
    <view class="btn2">
      立即认证
    </view>
  </view>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  onLoad () {
  },
  methods: {
    goBack () {
      uni.navigateBack({ delta: 2 })
    },
  },
}
</script>
<style lang="scss">
.company-vip-container {
  .bg {
    color: #8f725e;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 700upx;
    background: linear-gradient(
      to bottom,
      rgb(254, 238, 202),
      rgb(244, 212, 145)
    );
    .title {
      padding-top: 160upx;
      text-align: center;
      font-size: 36upx;
    }
    .content {
      padding-top: 20upx;
      left: 30upx;
      right: 30upx;
      position: absolute;
      border-radius: 20upx 20upx 0 0;
      background: #333;
      height: 400upx;
      bottom: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .item {
        text-align: center;
        width: 33.333%;
        .box {
          margin: 20upx auto;
          margin-bottom: 10upx;
          border-radius: 50%;
          width: 100upx;
          height: 100upx;
          background: linear-gradient(
            to bottom,
            rgb(254, 238, 202),
            rgb(244, 212, 145)
          );
          image {
            margin-top: 20upx;
            width: 60upx;
            height: 60upx;
          }
        }
      }
    }
  }
  .btn1 {
    border-radius: 80upx;
    margin: 30upx 30upx;
    margin-top: 60upx;
    padding: 30upx;
    border: 1px solid #8f725e;
    text-align: center;
    color: #8f725e;
  }
  .btn2 {
    background: linear-gradient(
      to right,
      rgb(254, 238, 202),
      rgb(244, 212, 145)
    );

    border-radius: 80upx;
    margin: 30upx 30upx;
    padding: 30upx;
    text-align: center;
    color: #8f725e;
  }
}
</style>